<template>
  <div class="content" >
    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 24px; font-weight: bold; font-size: 24px; margin-top: 24px;">
      维修记录
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand" >
              <el-form-item label="维修记录ID"  style="width: 80%">
                <span>{{ props.row.maintenanceRecordsId }}</span>
              </el-form-item>
              <el-form-item label="用户编号" style="width: 80%">
                <span>{{ props.row.userNo }}</span>
              </el-form-item>
              <el-form-item label="姓名" style="width: 80%">
                <span>{{ props.row.fullName }}</span>
              </el-form-item>
              <el-form-item label="类型" style="width: 80%">
                <span>{{ props.row.type  }}</span>
              </el-form-item>
              <el-form-item label="标题" style="width: 80%">
                <span>{{ props.row.title   }}</span>
              </el-form-item>
              <el-form-item label="报修时间" style="width: 80%">
                <span>{{ props.row.repairTime  }}</span>
              </el-form-item>
              <el-form-item label="联系电话" style="width: 80%">
                <span>{{ props.row.contactNumber }}</span>
              </el-form-item>
              <el-form-item label="维修地址" style="width: 80%">
                <span>{{ props.row.repairAddress  }}</span>
              </el-form-item>
              <el-form-item label="故障描述" style="width: 80%">
                <span>{{ props.row.faultDescription  }}</span>
              </el-form-item>
              <el-form-item label="任务ID" style="width: 80%">
                <span>{{ props.row.taskId  }}</span>
              </el-form-item>
              <el-form-item label="员工工号" style="width: 80%">
                <span>{{ props.row.employeeId   }}</span>
              </el-form-item>
              <el-form-item label="员工姓名" style="width: 80%">
                <span>{{ props.row.employeeName }}</span>
              </el-form-item>
              <el-form-item label="派工时间" style="width: 80%">
                <span>{{ props.row.dispatchTime  }}</span>
              </el-form-item>
              <el-form-item label="维修状态" style="width: 80%">
                <span>{{ props.row.maintenanceStatus  }}</span>
              </el-form-item>
              <el-form-item label="记录时间" style="width: 80%">
                <span>{{ props.row.recordTime  }}</span>
              </el-form-item>
              <el-form-item label="维修详情" style="width: 80%">
                <span>{{ props.row.repairDetails }}</span>
              </el-form-item>
              <!--              <el-form-item label="维修照片" style="width: 80%">
                              <template v-if="props.row.completionPhoto">
                                <img :src="props.row.completionPhoto" :alt="props.row.completionPhoto" style="max-width: 100%; height: auto" />
                              </template>
                              <template v-else>
                                暂无维修照片
                              </template>
                            </el-form-item>-->
              <el-form-item label="创建时间" style="width: 80%">
                <span>{{ props.row.createTime   }}</span>
              </el-form-item>
              <el-form-item label="更新时间" style="width: 80%">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="维修单号"
            prop="maintenanceRecordsId">
        </el-table-column>
        <el-table-column
            label="故障名称"
            prop="title">
        </el-table-column>
        <el-table-column
            label="维修进度"
            prop="maintenanceStatus">
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="bottom-fixed-button">
    <el-button type="primary" style="width: 90%; " @click="returnToTechnician">返回菜单</el-button>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import {ElMessage} from "element-plus";
import {useStore} from "vuex";

const router = useRouter();

const tableData = ref([
  {
    maintenanceRecordsId: '',
    userNo: '',
    fullName: '',
    type: '',
    title: '',
    repairTime: '',
    contactNumber: '',
    repairAddress: '',
    faultDescription: '',
    taskId: '',
    employeeId: '',
    employeeName: '',
    dispatchTime: '',
    maintenanceStatus: '',
    recordTime: '',
    repairDetails: '',
    completionPhoto:'',
    createTime: '',
    updateTime: '',

  },
  // 更多数据项...
]);

//const repairPersonnelID = localRepair.getItem('repairPersonnelID');


const handleBack = () => {
  router.back();
};

const returnToTechnician = () =>{
  router.push('/technician/home')
}

const store = useStore();

onMounted(async () => {
  try {
    const user = store.getters.user;
    if (!user || !user.repairPersonnelId) {
      ElMessage.error('用户未登录或用户信息不完整');
      return;
    }
    const response = await axios.get(`http://localhost:8080/maintenance-records/${user.repairPersonnelId}`);
    if (response.status === 200) {
      tableData.value = response.data;
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});
</script>

<style scoped>
.content {
  min-height: calc(100vh - 100px); /* 减去按钮的高度，比如50px */
  overflow-y: auto;
  padding-bottom: 50px; /* 同样，这里应该是按钮的高度 */
}

.bottom-fixed-button {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}

/* 添加新的样式 */
.demo-table-expand {
  font-size: 14px; /* 调整字体大小 */
  padding: 16px; /* 添加内边距以使表单与边缘有距离 */
  border: 1px solid #ebeef5; /* 添加边框 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.demo-table-expand label {
  width: 120px; /* 增加宽度以适应更长的标签 */
  color: #606266; /* 改变颜色 */
  margin-right: 16px; /* 增加右侧的外边距 */
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 16px; /* 增加底部的外边距 */
  width: calc(50% - 16px); /* 调整宽度以适应标签宽度增加 */
}

/* 新增样式以增加标题与表单之间的间距 */
.content > div:first-child {
  padding-bottom: 24px; /* 添加底部的外边距以与表单拉开距离 */
}
</style>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>